<template>
	<view style="min-height: 800px;">
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-xl" @tap.stop="" style=" position: relative; overflow: scroll; ">
				<!-- 行情 -->
				<marketList2 :list="marketList" v-on:ToChange="changemarket"></marketList2>
			</view>
		</view>
		<!-- <scroll-view id="nav-bar" scroll-x class="nav bg-black">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :id="'tab'+index" v-for="(item,index) in tabBars" :key="item.id"
					:class="index==tabCurrentIndex?'text-yellow cur':''" @tap="changeTab(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view> -->

		<!-- 内容部分 -->
		<!-- <swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
			 
			<swiper-item>
				<cointrade ref="cointrade"></cointrade>

			</swiper-item>
			<swiper-item>
				<contract ref="contract"></contract>
			</swiper-item>

			<swiper-item>

			</swiper-item>

		</swiper> -->
		 <qx ref="qx"></qx>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	// import cointrade from '@/components/trade/cointrade.vue';
	import qx from '@/components/trade/qx.vue';
	import countdownTime from '@/components/countdown-timer.vue'
	import marketList2 from '@/components/marketList2.vue'
	// import json from '@/json'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			// mixPulldownRefresh, 
			countdownTime,
			marketList2,
			qx, 
		}, 
		data() {
			return {
				modalName: null,
				radio: '',
				marketList: [],
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引 

				symbol: '',
				buyname: '--',
				salename: '--',
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			}
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadTabbars();
		},
		onShow() {
			this.tablang()
			this.getcoinlist();
			this.init()
		},
		onNavigationBarButtonTap(e) {
			console.log(e.index)
			if (e.index == 0) {
				this.showModal('DrawerModalL')
			}
			if (e.index == 1) {
				this.drawerVisible = true;
				let data = {
					symbol: this.symbol,
					name: this.salename,
					priceUnit: this.buyname
				}
				uni.navigateTo({
					// url: `/pages/trade/kline/main?data=${JSON.stringify(data)}`,
					url: `/pages/market/comkline?data=${JSON.stringify(data)}`
					// url: `/pages/market/kline?data=${JSON.stringify(data)}`
				})
			}
		},
		methods: {
			...mapActions(['getUserinfo']),
			tablang() {
				uni.setTabBarItem({
					index: 0,
					text: this.i18n.tabBar.home
				});
				uni.setTabBarItem({
					index: 1,
					text: this.i18n.tabBar.coin
				});
				uni.setTabBarItem({
					index: 2,
					text: this.i18n.tabBar.Wallet
				});
				uni.setTabBarItem({
					index: 3,
					text: this.i18n.tabBar.team
				});
				uni.setTabBarItem({
					index: 4,
					text: this.i18n.tabBar.my
				});
			},
			getcoinlist() {
				//行情列表
				this.$http.post('btc.qi').then(res => {
					if (res.code == 1) {
						this.marketList = res.data;
					}
				}).catch(re => {
					console.log(re)
				})
			},
			changemarket(index) {
				console.log(index)
				uni.setStorageSync('market', this.marketList[index]);
				this.hideModal();
				// console.log(this.$refs.cointrade)
				this.init()
				


			},
			init() {
				clearInterval(this.tradetimer)
				let data = uni.getStorageSync('market');
				console.log(data)
				this.symbol = data.symbol ? data.symbol : 'btcusdt';
				this.salename = data.name ? data.name.toUpperCase() : 'BTC';
				this.buyname = data.priceUnit ? data.priceUnit : 'USDT'; 
				// uni.setNavigationBarTitle({
				// 	title: this.salename + '-' + this.buyname
				// });
				// this.$refs.cointrade.init();
				// this.$refs.contract.init();
				this.$refs.qx.ini();
			},
			showModal(name) {
				console.log(name)
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			//获取分类
			loadTabbars() {
				let tabList = [{
						name: '币币',
						id: '1',
						status: '0,1'
					},
					{
						name: '合约',
						id: '2',
						status: '2'
					},
					{
						name: '量化',
						id: '3',
						status: '3'
					},
				];
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.page = 1;
				})
				this.tabBars = tabList;
				// this.loadNewsList('add');
			},

			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//tab切换
			async changeTab(e) {

				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;

					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					// if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
					// 	this.loadNewsList('add');
					// 	tabItem.loaded = true;
					// }
					// this.loadNewsList('refresh');
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			// tabSelect(e) {
			// 	this.tabCurrentIndex = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// }
		}
	}
</script>

<style scoped>
	.cu-item .text-gray {
		width: 45px;
		display: inline-block;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
	}

	/* .nav .cu-item.cur {
		border-bottom: 1px solid;
	} */

	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
</style>
